<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello-world</title>
    <style>
        [v-cloak] {
            display: none;
        }

        .colorClass {
            color: red;
        }

        .fontClass {
            font-size: 40px;
        }
    </style>
</head>
<div id="app">
    <p :class="{colorClass:cls.isCc,fontClass:cls.isFc}">绑定class属性</p>
    <input type="text" v-model="msgx">
    <br>
    <input type="text" v-model="msg">
    <p :title="holder" v-cloak>{{ msg }}</p>
    <p :title="tip">{{ msg.toLocaleUpperCase() }}</p>
    <h1>{{content}}</h1>
    <img alt="alt" height="20px" pla v-bind:src="url" width="20px">
    <img :src="url" height="20px" width="20px">
    <button @click.stop="click($event)">阻止时间冒泡</button>
    <button @click.prevent="click($event)">阻止标签的默认行为</button>
    <input @keyup.enter="keyup" type="text">
    <br>
    <ul>
        <li :key="i" v-for="(p,i) in persons">
            {{i}}--{{p.name}}--{{p.age}}
            <button @click="del(i)">删除x</button>
            <button @click="update(i)">更新</button>
        </li>
    </ul>
    <br>
    <button @click="ch">摧毁</button>
    <br>
    <P>{{date|dateStr}}</P>
    <P>{{date|dateStr("YYYY-MM-DD")}}</P>
    <br>
    <p v-text="msg"></p>
    <p ref="hintContent">asd安抚</p>
    <button @click="hint">显示</button>
    <br>
    <p v-upper>{{msg}}</p>
    <p v-lower>{{msg}}</p>
</div>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.js"></script>
<script>

    /**
     * 过滤器
     */
    Vue.filter("dateStr", function (date, exp = "YYYY-MM-DD hh:mm:ss") {
        return moment(date).format(exp);
    });
    /**
     * 自定义--全局指令
     */
    Vue.directive("upper", function (el, binding) {
        el.textContent = el.textContent.toUpperCase();
        console.log(el)
        console.log(binding)
    })


    var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue!",
            url: "https://cn.vuejs.org/images/logo.png",
            tip: "",
            content: "",
            cls: {
                isCc: true,
                isFc: true
            },
            persons: [
                {
                    name: "a",
                    age: 1
                },
                {
                    name: "b",
                    age: 2
                },
                {
                    name: "c",
                    age: 3
                }
            ],
            date: new Date()
        },
        methods: {
            click($event) {
                console.log($event);
                alert("click")
            },
            del(i) {
                this.persons.splice(i, 1);
            },
            update(i) {
                let person = this.persons[i];
                person.name = person.name + new Date().getSeconds();
            },
            keyup(event) {
                console.log(event)
                alert(event.target.value)
            },
            ch() {
                this.$destroy();
            },
            hint() {
                alert(this.$refs.hintContent.innerHTML)
            }
        },
        computed: {
            holder() {
                let date = new Date();
                return this.msg + "   computed   " + date.getSeconds();
            },
            msgx: {
                get() {
                    return this.msgx = this.msg;
                },
                set(msgx) {
                    this.msg = msgx;
                }

            }
        },
        watch: {
            msg: function (oldVal) {
                let date = new Date();
                this.tip = this.msg + "   watch   " + date.getSeconds();
            }
        },
        mounted() {
            this.interval = setInterval(function () {
                console.log("xxx" + new Date().getSeconds())
            }, 100000);
        },
        beforeDestroy() {
            console.log("死了");
            clearInterval(this.interval)
        },
        /**
         * 自定义--局部指令
         */
        directives: {
            "lower": function (el, binding) {
                console.log(el, binding)
            }
        }
    });
    vm.$watch("msg", function (val) {
        let date = new Date();
        this.content = val + "   $watch   " + date.getSeconds();
    })
</script>
</body>
</html>
